<template>
	<view>
		<view>
			<view class="search">
				<view class="icon-cl">
					<image class="icon" src="/static/myorder/search.png" />
				</view>
				<input class="text" v-model="query" @input="input" @confirm="search" placeholder="输入关键字搜索" />
			</view>
		</view>
		<view v-if="!isSearch" v-for="(Item,Idx) in myParticipateList.list" :key="Idx" class="list1">
		  <view class="part1">
			<image class="image1" :src="Item.activityImage" mode="aspectFill"></image>
			<text style="margin-top: 5px;margin-left: 10px;">一等奖：{{Item.activityName}}</text>
		  </view>
		  <view class="part2">
			<image class="image2" src="../../static/home/Apple.png" mode="aspectFill"></image>
			<text style="font-size: 14px;margin-top: 10px;">Apple Store 官方旗舰店</text>
		  </view>
		</view>
		<view v-if="isSearch" v-for="(Item,Idx) in filterList.list" :key="Idx" class="list1" >
			<view class="part1">
					<image class="image1" :src="Item.activityImage" mode="aspectFill"></image>
					<text style="margin-top: 5px;margin-left: 10px;">一1等奖：{{Item.activityName}}</text>
			</view>
			<view class="part2">
						<image class="image2" src="../../static/home/Apple.png" mode="aspectFill"></image>
						<text style="font-size: 14px;margin-top: 10px;">Apple Store 官方旗舰店</text>
			</view>
		</view>
	</view>
</template>

<script>
	import SearchBox from '../../components/SearchBox.vue'
	export default {
		data() {
			return {
				userdata:{
					openId:'',
					token:'',
				},
				myParticipateList:{
					current:1,
					size:10,
					total:0,
					list:[],
				},
				filterList:{
					current:1,
					size:10,
					total:0,
					list:[],
				},
				query:'',
				isSearch:false,
				results: [],
				size:10,
				current:1
			}
		},
		methods: {
			input(res){
				this.query=res.detail.value
			},
			async search(res) {
				// 获取用户输入的查询字符串
				this.query=res.detail.value
				const query = this.query.trim().toLowerCase();
				if (!query) {
					this.isSearch=false
					console.log("return");
					return;
				}
				await this.$myRequest({
					url: '/user/getUserActivity',
					method: 'GET',
					header: {
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						openId:this.userdata.openId,
						name:query,
					}

				}).then(res => {
					// res.data.data.list.forEach((item,index)=>{
					// 	console.log(item,'item')
					// 	this.$set(item,)
					// })
					const newData = res.data;
					const oldData = [];
					const newDataStr = newData.map(item => JSON.stringify(item));
					const oldDataStr = oldData.map(item => JSON.stringify(item));
					const mergedDataStr = [...oldDataStr, ...newDataStr];
					const uniqueDataStr = Array.from(new Set(mergedDataStr));
					const uniqueData = uniqueDataStr.map(item => JSON.parse(item));
					this.filterList.list = uniqueData;
					console.log(this.filterList.list,'filterList');
					this.isSearch=true
				}).catch(err => {
					console.log(err);
				})

			},
			getawardList(){
				this.$myRequest({
					url:'/user/getUserActivity',
					header:{
						Authorization:this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded',
					},
					data:{
						openId:this.userdata.openId,
						name:"",
					},
				}).then(res=>{
					console.log(res);
					  const newData = res.data;
					  const oldData = this.myParticipateList.list;
					  const newDataStr = newData.map(item => JSON.stringify(item));
					  const oldDataStr = oldData.map(item => JSON.stringify(item));
					  const mergedDataStr = [...oldDataStr, ...newDataStr];
					  const uniqueDataStr = Array.from(new Set(mergedDataStr));
					  const uniqueData = uniqueDataStr.map(item => JSON.parse(item));
					  this.myParticipateList.list = uniqueData;
					  console.log(this.myParticipateList.list,'participatelist');
				}).catch(err=>{
					console.log(err);
				})
			},
			async getStorage(){
				const openId =uni.getStorageSync('openId')
				const token = uni.getStorageSync('token')
				this.userdata.openId=openId
				this.userdata.token=token
			},
		},
		onLoad(){
			this.getStorage()
			this.getawardList();
		},
		
	}
</script>

<style>
  .list1 {
    background-color: #FFFFFF;
    border: lightgray solid 1px;
    border-radius: 1%;
    width: 92%;
    height: 470rpx;
    margin-left: 4%;
    margin-top: 10px;
    overflow: auto;
  }

  .list1 .part1 .image1 {
    height: 320rpx;
    width: 100%;
  }

  .list1 .part2 {
    margin-top: 5px;
    height: 90rpx;
    width: 100%;
    margin-left: 10px;
    border-radius: 100%;
    display: flex;
  }

  .list1 .part2 .image2 {
    margin-top: 5px;
    height: 60rpx;
    width: 60rpx;
    border-radius: 100%;
  }
	/* 搜索框样式 */

	.search {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-left: 3%;
		width: 94%;
		height: 60rpx;
		background-color: whitesmoke;
		margin-top: 5%;
		border: 1rpx solid whitesmoke;
		border-radius: 20rpx;
	}

	/* 搜索框提示文字样式 */
	.search input {
		font-size: 27rpx;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		padding-left: 30rpx;
	}

	/* 搜索框小图标 */
	.search image {
		width: 40rpx;
		height: 40rpx;
		padding-right: 20rpx;
	}
</style>
